<template>
<div>
  <!-- 商品图片展示组件 -->
  <van-image :src="data?.image" style="width: 100%; height: 400px" />

  <!-- 主要内容区域 -->
  <main style="padding: 10px 15px">
    <div class="title">{{ data?.title }}</div> <!-- 商品标题 -->
    <div class="integral">{{ data?.money }}</div> <!-- 积分 -->
    <div class="content">
      {{ data?.details }} <!-- 商品详细内容 -->
    </div>
  </main>

  <!-- 分割线组件 -->
  <van-divider :hairline="false" />

  <!-- 表单组件 -->
  <van-form label-width="10em">
    <van-cell-group inset>
      <van-field
        v-model="data.class"
        name="attribute"
        size="large"
        label="班级"
        placeholder="班级"
        :rules="[{ required: true, message: '请选择班级' }]"
      >
        <template #input>
          <van-cell is-link title="请选择班级" @click="show = true" style="padding: 0" />
        </template>
      </van-field>
    </van-cell-group>
  </van-form>

  <div style="height: 1rem; width: 100%; background: #f5f6f8"></div>
  <div style="font-size: 15px; padding: 10px 15px; font-weight: bold">产品介绍：</div>

  <!-- 商品介绍区域 -->
  <div style="padding: 5px 15px; min-height: 200px; text-indent: 30px; padding-bottom: 10vh">
    {{ data?.details }} <!-- 商品详细内容 -->
  </div>

  <!-- 班级选择弹出窗口组件 -->
  <van-popup v-model:show="show" position="bottom" :style="{ height: '' }">
    <div class="starItem">
      <div><img :src="data?.image" alt="" /></div> <!-- 商品图片展示 -->
      <div class="one">
        <div>{{ data?.title }}</div> <!-- 商品标题 -->
        <div class="go">
          <div>{{ data?.money }}</div> <!-- 积分 -->
          <div></div>
        </div>
      </div>
    </div>
    <div style="font-size: 15px; font-weight: bold; padding: 0 1rem">选择班级</div>
    <div
      style="padding: 1rem; display: flex; align-items: center; justify-content: space-between"
    >
      <div style="font-weight: 600; font-size: 14px">班级</div>
      <van-field
        style="display: flex; width: 70vw; justify-content: center; text-align: center"
        name="class"
        :rules="[{ required: true, message: '请选择班级' }]"
        size="small"
      >
        <template #input>
          <van-radio-group direction="horizontal" v-model="model.class">
            <van-radio :name="1">小班</van-radio>
            <van-radio :name="2">中班</van-radio>
            <van-radio :name="3">大班</van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </div>

    <div style="padding: 1rem">
      <!-- 立即购买按钮 -->
      <van-button
        type="primary"
        style="width: 100%; border-radius: 20px"
        @click="ConfirmationOfPayment()"
        >立即购买</van-button
      >
    </div>
  </van-popup>

  <!-- 操作栏组件 -->
  <van-action-bar>
    <!-- 立即购买按钮，在点击时弹出班级选择弹出窗口 -->
    <van-action-bar-button type="primary" text="立即购买" @click="show = true" />
  </van-action-bar>
</div>

</template>

<script setup>
import { useIntegrallist } from '@/stores/integralList.js' // 导入名为useIntegrallist的自定义钩子函数
import { useUserInfoStore } from '@/stores/user.js' // 导入名为useUserInfoStore的自定义钩子函数
import { storeToRefs } from 'pinia' // 导入storeToRefs函数用于将pinia store对象转换为ref对象
import { computed, reactive, ref } from 'vue' // 导入computed、reactive和ref函数
import { useRouter } from 'vue-router' // 导入useRoute和useRouter函数用于获取当前路由和进行页面跳转
import { giftBoxOrder} from '../api' // 导入api中的接口函数

const show = ref(false) // 创建名为show的响应式引用(ref)对象并初始化为false
const userInfoStore = useUserInfoStore() // 调用useUserInfoStore钩子函数创建名为userInfoStore的用户信息Store对象
const { curStudent } = storeToRefs(userInfoStore) // 将userInfoStore中的curStudent属性解构为curStudent的ref对象
const integrallist = useIntegrallist() // 调用useIntegrallist钩子函数创建名为integrallist的积分列表Store对象
const { curGiftJob } = storeToRefs(integrallist) // 将integrallist中的jobs、curJob和curGiftJob属性解构为对应的ref对象
const data = computed(() => curGiftJob.value) // 创建名为data的计算属性，其值为curGiftJob的值
const router = useRouter() // 调用useRouter函数创建名为router的路由对象
const model = reactive({ // 创建名为model的响应式对象，包含class属性初始值为1
  class: 1
})

async function ConfirmationOfPayment() {
  let res = await giftBoxOrder({ // 调用giftBoxOrder接口函数，传入订单相关参数，并使用await等待接口返回结果
    user_id: curStudent.value.id, // 使用curStudent的值作为用户ID
    commodity_id: curGiftJob.value.id, // 使用curGiftJob的值作为商品ID
    address_id: curStudent.value.address_id // 使用curStudent的address_id作为地址ID
  })

  router.push({ // 通过router进行页面跳转，跳转至'/confirmationOfPayment'路径，并传递参数orderId和Fuck
    path: '/confirmationOfPayment',
    query: {
      orderId: res.id,
      Fuck: res.content
    }
  })
}






</script>

<style lang="less" scoped>
.title {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  font-weight: bold;
}
.integral {
  margin: 0.5rem 0;
  color: #ffc456;
  font-size: 18px;
  font-weight: bold;
  &::before {
    content: '￥';
    font-size: 11px;
  }
}
.content {
  color: gray;
  font-size: 14px;
}

@var1: #ffc456;
@var2: #ffc456;
@var3: #f5f6f8;
@var4: #ffffff;
.starItem {
  padding: 1rem;
  display: flex;
  background-color: @var4;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 100px;
    height: 100px;

    border-radius: 10px;
  }
  .one {
    width: 65%;
    > div:first-child {
      font-weight: 900;
      font-size: 14px;
    }
  }
  .go {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div:first-child {
      color: @var1;
      font-size: 14px;
      font-weight: 900;
    }
  }
}
</style>
